<div class="layui-card">
  <form class="layui-form" lay-filter="add-goods-form">
    <blockquote class="layui-elem-quote">添加评价的商品</blockquote>
    <button lay-href="/goods/goods-list/" class="layui-btn" style="position: absolute;right: 60px;top: 8px;">返回</button>
    <div class="layui-form-item">
      <ul class="info-msg">
      	<li class="info-msg-l">
      		<img id="image" src=""/>
      	</li>
      	<li class="info-msg-r">
      		<p>书名：<span id="title"></span></p>
      		<p>作者：<span id="author"></span></p>
      		<p>ISBN：<span id="ISBN"></span></p>
      	</li>
      </ul>
    </div>
    <blockquote class="layui-elem-quote">添加评论</blockquote>
    <div class="layui-form-item">
      <label class="layui-form-label">选择用户：</label>
      <div class="layui-input-inline" style="width: 70%;">
      	<img id="avatar" src="" alt="" style="width: 40px;height: 40px;border-radius: 50%;float: left;margin-right: 10px;" />
        <input style="width: 200px;float: left;margin-right: 20px;" name="user_nickname" id="user_nickname" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
        <input type="hidden" name="user_id" id="user_id" placeholder="" autocomplete="off" class="layui-input">
        <input type="hidden" name="user_avatar" id="avatar1" placeholder="" autocomplete="off" class="layui-input">
        <button style="float: left;" class="layui-btn" id="random">换一个用户</button>
      </div>
        <div class="layui-form-mid layui-word-aux"></div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">选择评分：</label>
      <div class="layui-input-inline">
       <select name="score" lay-verify="">
          <option value="">请选择评分</option>
          <option value="1">1分</option>
          <option value="2">2分</option>
          <option value="3">3分</option>
          <option value="4">4分</option>
          <option value="5">5分</option>
          <option value="6">6分</option>
          <option value="7">7分</option>
          <option value="8">8分</option>
          <option value="9">9分</option>
          <option value="10">10分</option>
        </select>
        <span>评分从1-10，这个评分是留以后用的，前端页面用不着</span>
      </div>
        <div class="layui-form-mid layui-word-aux"></div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">写评论：</label>
      <div class="layui-input-inline" style="width: 70%;">
        <textarea name="content" id="content" lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
      </div>
        <div class="layui-form-mid layui-word-aux"></div>
    </div>
    <div class="layui-form-item" style="text-align: center">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">保存这条评论</button>
        </div>
    </div>
  </form>
  <script type="text/html" id="LAY-good-list-table-stock19">
		<img src="{{d.user_avatar}}" alt="" style="width:40px; height: 40px;border-radius: 50%;">
	</script>
  <script type="text/html" id="LAY-good-list-table-edit1">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>
   <table id="LAY-good-comment" lay-filter="LAY-good-comment"></table>
</div>
<script>
    //Demo
  layui.use(['form', 'upload','laydate', 'table'], function(){
  	var laydate = layui.laydate;
    var form = layui.form;
    var $ = layui.$;
    var table = layui.table;
    var upload = layui.upload;  
    var book_id = layui.router().search.book_id;
    var cols = [[
            {field:'user_avatar', title: '用户头像',templet: '#LAY-good-list-table-stock19',width:120,align: 'center'}
            ,{field:'user_nickname',align: 'center', title: '用户'}
            ,{field:'content',align: 'center', title: '评价内容'}
            ,{field:'score',align: 'center', title: '评分'}
            ,{width:178, align:'center', fixed: 'right',title: '操作', toolbar: '#LAY-good-list-table-edit1'}
          ]];
	  table.set({
	    headers: { //通过 request 头传递
	      'access-token': layui.data('layuiAdmin').access_token
	    }
	  });
	  // 删除评论
	  table.on('tool(LAY-good-comment)', function(obj){
	  	var data = obj.data;
	  	if(obj.event === 'del'){
        layer.confirm('是否删除', function(index){
   	    $.ajax({
			    type: "DELETE",
			    dataType: "json",
			    url: "https://bookshop.dingdangtoy.com/api/admin/book_comment/destroy",
			    data: {id:data.id},
			    headers: { //通过 request 头传递
	              'access-token': layui.data('layuiAdmin').access_token
	            },
				success: function(data){
				    layer.msg('操作成功');
				    layui.table.reload('LAY-good-comment'); //重载表格
		        layer.close(index); //执行关闭 
				},
				error: function(msg){
				  console.log(msg)
				}
			});
        });	  		
	  	}
	  })
    table.render({
      elem: '#LAY-good-comment'
      ,url: 'https://bookshop.dingdangtoy.com/api/admin/book_comment/index?book_id='+book_id
      ,parseData: function(res){ //res 即为原始返回的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.message, //解析提示文本
          "data": res.data.items //解析数据列表
        }
      }
      ,cols: cols
      ,page: false
    });          
    // 获取 图书信息
    $.ajax({
		    type: "GET",
		    dataType: "json",
		    url: "https://bookshop.dingdangtoy.com/api/admin/book/show?id="+ book_id,
		    data: {},
		    headers: { //通过 request 头传递
	          'access-token': layui.data('layuiAdmin').access_token
	        },
			success: function(data){		
				console.log(data.data)
				$('#title').text(data.data.title)
				$('#author').text(data.data.author)
				$('#title').text(data.data.title)
				$('#ISBN').text(data.data.isbn)
				$('#image').attr('src',data.data.image)
				form.render();
			},
			error: function(msg){
			  console.log(msg)
			}
		});  
    form.render(null, 'add-goods-form')
    //监听提交
    form.on('submit(formDemo)', function(data){
    console.log(data)
    layer.confirm('是否执行此操作？', function(index) {       
          //执行 Ajax 后重载
		    $.ajax({
			    type: "POST",
			    dataType: "json",
			    url: "https://bookshop.dingdangtoy.com/api/admin/book_comment/store",
			    data: {
			    	book_id: book_id,
			    	user_nickname: data.field.user_nickname,
			    	user_avatar: data.field.user_avatar,
			    	user_id: data.field.user_id,
			    	score: data.field.score,
			    	content: data.field.content
			    },
			    headers: { //通过 request 头传递
		          'access-token': layui.data('layuiAdmin').access_token
		        },
				success: function(data){
					
          table.reload('LAY-good-comment');
          layer.msg('操作成功');
				},
				error: function(msg){
				  console.log(msg)
				}
			});  
        });
    return false;
    });
    // 随机姓名
    $('#random').on('click', function(){
          //执行 Ajax 后重载
		    $.ajax({
			    type: "GET",
			    dataType: "json",
			    url: "https://bookshop.dingdangtoy.com/api/admin/user/rand_one",
			    data: {},
			    headers: { //通过 request 头传递
		          'access-token': layui.data('layuiAdmin').access_token
		        },
				success: function(data){
					$('#user_nickname').val(data.data.nickname);
					$('#user_id').val(data.data.user_id);
					$('#avatar1').val(data.data.avatar);
					$('#avatar').attr('src',data.data.avatar)
		        
				},
				error: function(msg){
				  console.log(msg)
				}
			}); 
			return false;
  });   
  });
</script>
<style>
    .layui-form-label {text-align: center; width: 170px;}
    .info-msg{width: 94%;height: 100px;clear: both;margin: 0 auto;}
    .info-msg li{float: left;}
    .info-msg .info-msg-l{width: 100px;height: 100px;margin-right: 20px;}
    .info-msg .info-msg-l img{width: 82px;height: 110px;display: block;}
    .info-msg .info-msg-r{width: 300px;}
    .info-msg .info-msg-r p{line-height: 30px;}
</style>